import {createElement, Component, findDOMNode} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Touchable from 'rax-touchable';
import Picture from 'rax-picture';
import Player from 'rax-player';
import Slider from 'rax-slider';
import ScrollView from 'rax-scrollview';
import transition from 'universal-transition';
import { isWeex } from 'universal-env';

const defaultModuleData = {
  isHome: '0',
  modName: '',

  picture: 'https://img.alicdn.com/imgextra/i2/3355153118/TB26_2uaSBYBeNjy0FeXXbnmFXa-3355153118.jpg',
  height: 80,
  hasPic: '0',
  // 轮播
  tagWidth: 10,
  tagSelectWidth: 20,
  tagBottom: 20,
  tagBg: '#ffffff',
  tagSelectBg: '#000000',
  tagMargin: 10,
  sliderHeight: 563,
  sliderPictures: [
    {
      picUrl: '//img.alicdn.com/imgextra/i3/3355153118/TB2u2ulo8DH8KJjy1zeXXXjepXa-3355153118.jpg',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: '//img.alicdn.com/imgextra/i3/3355153118/TB2u2ulo8DH8KJjy1zeXXXjepXa-3355153118.jpg',
      hotUrl: '//m.taobao.com',
    },
    {
      picUrl: '//img.alicdn.com/imgextra/i3/3355153118/TB2u2ulo8DH8KJjy1zeXXXjepXa-3355153118.jpg',
      hotUrl: '//m.taobao.com',
    },
  ],

  // 图片热区
  imgHot1: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },
  imgHot2: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },
  imgHot3: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },
  imgHot4: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },
  imgHot5: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },
  imgHot6: {
    screenHeight: 400,
    screenWidth: 750,
    hot: [{
      data: {
        name: 'hot1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: '//m.taobao.com/'
      }
    }],
    img: [{
      data: {
        name: 'img1',
        x: 0,
        y: 0,
        width: 750,
        height: 400,
        url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2TAwfmyqAXuNjy1XdXXaYcVXa-3355153118.jpg'
      }
    }]
  },


  // 买家秀

  buyerSayPic1: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2c3BOaL9TBuNjy0FcXXbeiFXa-3355153118.jpg',
  buyerSayData1: [
    {
      title: '用户1：好产品fsfweffweffwe滴滴哇多翁多',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户2：啊啊啊啊范围发生的芬芳啊的沙发斯蒂芬地方服务范围发生的方向',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户3：山东分公符文法师地方司梵蒂冈',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户4：dsfdsf水果味儿',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户5：啊啊发的三分发生的风格未付费啊啊啊对方是否会地方公司的覆盖的格瑞特的粉丝高大上',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户6：山东分公司梵蒂冈',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
    {
      title: '用户7：山东分公司asdfasdf梵蒂冈',
      hotUrl: '//m.taobao.com',
      imgUrl: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2wPyVXOMnBKNjSZFoXXbOSFXa-3355153118.jpg'
    },
  ],
  buyerSayData2: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i4/0/TB1_QmXdER1BeNjy0FmXXb0wVXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '第三方给的说法撒地方1',
      buyer: '用户1',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i4/0/TB1_QmXdER1BeNjy0FmXXb0wVXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '递四方速递勾三搭四的方式的发生2',
      buyer: '用户2',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i4/0/TB1_QmXdER1BeNjy0FmXXb0wVXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '的黑寡妇个护地方还分房管局梵蒂冈的3',
      buyer: '用户3',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i2/0/TB1myOVeFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '和根深蒂固地方个护如果4',
      buyer: '用户4',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i2/0/TB1myOVeFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '好几个地方换个方式豆腐干5',
      buyer: '用户5',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i2/0/TB1myOVeFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '很反感就换一个的缝合6',
      buyer: '用户6',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i2/0/TB1myOVeFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      context: '和个护发的根深蒂固的7',
      buyer: '用户7',
      img1: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
      img2: 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    },
  ],


  tab4baoUrl: '//img.alicdn.com/imgextra/i2/0/TB1myOVeFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg',
  tab4baoWidth: 60,
  // 商品组件
  bgColor: '#ffffff',
  borderColor: '#FFEECE',
  discountColor: 'black',
  discountBgColor: 'rgba(255,255,255,0.8)',


  rowCount1: 3,
  goodsLists2: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
  ],
  tab4GoodsTab: [
    {
      tabPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB29UdNaFuWBuNjSszbXXcS7FXa-3355153118.jpg',
      tabIndexPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2jb1LXWmWBuNkHFJHXXaatVXa-3355153118.jpg',
    },
    {
      tabPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB29UdNaFuWBuNjSszbXXcS7FXa-3355153118.jpg',
      tabIndexPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2jb1LXWmWBuNkHFJHXXaatVXa-3355153118.jpg',
    },
    {
      tabPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB29UdNaFuWBuNjSszbXXcS7FXa-3355153118.jpg',
      tabIndexPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2jb1LXWmWBuNkHFJHXXaatVXa-3355153118.jpg',
    },
    {
      tabPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB29UdNaFuWBuNjSszbXXcS7FXa-3355153118.jpg',
      tabIndexPic: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2jb1LXWmWBuNkHFJHXXaatVXa-3355153118.jpg',
    },
  ],
  tab4Goods1: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '111',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
  ],
  tab4Goods2: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '111',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
  ],
  tab4Goods3: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '111',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
  ],
  tab4Goods4: [
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '111',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
    {
      imgUrl: '//img.alicdn.com/imgextra/i1/0/TB1vLaTeL9TBuNjy0FcXXbeiFXa_!!0-item_pic.jpg',
      h5Url: '//h5.m.taobao.com/awp/core/detail.htm?id=566156177352',
      // salePrice: '555',
      discount: '免税免税免税啊',
      header: '岳父岳母不能忘',
      text: 'cenovis维生素咀嚼片',
    },
  ],

  playerList: [
    {
      url: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      pos: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2ZoDVbmtYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '狼叔送礼都会选择的羊肥皂',
      titleUrl: '//m.taobao.com',
    },
    {
      url: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      pos: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2ZoDVbmtYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '给你温和呵护',
      titleUrl: '//m.taobao.com',
    },
    {
      url: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      pos: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2ZoDVbmtYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '澳洲眼科医生倾情推荐',
      titleUrl: '//m.taobao.com',
    },
    {
      url: 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4',
      pos: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2ZoDVbmtYBeNjSspaXXaOOFXa-3355153118.jpg',
      title: '给牙齿做面膜',
      titleUrl: '//m.taobao.com',
    },
  ],


};


class MainApp extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
      selected: 0,
    };
  }

  goTargetUrl = (url, nid) => {
    let { mds, gdc } = this.state;
    let params = {
      url: url,
      nid: nid || 0,
      widgetId: mds.widgetId,
      moduleName: mds.moduleName
    };

    this.pageUtils && this.pageUtils.goTargetUrl(params);
  };

  checkData(data, defaultKey, type, firstChildAttr) {
    let newData;
    switch (type) {
      case 'num': {
        newData = parseInt(data) ? parseInt(data) : defaultModuleData[defaultKey];
        break;
      }
      case 'string': {
        newData = data.length > 0 ? data : defaultModuleData[defaultKey];
        break;
      }
      case 'array': {
        newData = data.length && data[0][firstChildAttr].length ? data : defaultModuleData[defaultKey];
        break;
      }
      case 'goods': {
        if (typeof data === 'string') {
          newData = data.length > 0 ? data : defaultModuleData[defaultKey];
        } else {
          newData = data.length && data[0].goods.length ? data : defaultModuleData[defaultKey];
        }
        break;
      }
      case 'jsonStr': {
        try {
          newData = JSON.parse(data);
        } catch (e) {
          newData = defaultModuleData[defaultKey];
        }
        break;
      }
      default: {
        newData = data;
      }
    }
    return newData;
  }

  render() {
    const { mds } = this.state;
    let {
      tagWidth = '',
      tagSelectWidth = '',
      tagBottom = '',
      tagBg = '',
      tagSelectBg = '',
      tagMargin = '',
      sliderHeight = '',
      sliderPictures = [],

      imgHot1 = '',
      imgHot2 = '',
      imgHot3 = '',
      imgHot4 = '',
      imgHot5 = '',
      imgHot6 = '',


      buyerSayPic1 = '',
      buyerSayData1 = [],
      buyerSayData2 = [],


      bgColor = '',
      borderColor = '',
      discountColor = '',
      discountBgColor = '',

      tab4baoUrl = '',
      tab4baoWidth = '',
      rowCount1 = '',
      tab4GoodsTab = [],
      tab4Goods1 = [],
      tab4Goods2 = [],
      tab4Goods3 = [],
      tab4Goods4 = [],

      playerList = [],

      picture = '',
      height = '',
      hasPic = '',

    } = this.state.mds.moduleData;


    // 校正数据
    const { checkData = () => {} } = this;
    // 轮播
    tagWidth = checkData(tagWidth, 'tagWidth', 'num');
    tagSelectWidth = checkData(tagSelectWidth, 'tagSelectWidth', 'num');
    tagBottom = checkData(tagBottom, 'tagBottom', 'num');
    tagMargin = checkData(tagMargin, 'tagMargin', 'num');
    tagBg = checkData(tagBg, 'tagBg', 'string');
    tagSelectBg = checkData(tagSelectBg, 'tagSelectBg', 'string');
    const tagStyle = {
      tagWidth,
      tagSelectWidth,
      tagBottom,
      tagMargin,
      tagBg,
      tagSelectBg,
    };
    sliderHeight = checkData(sliderHeight, 'sliderHeight', 'num');
    sliderPictures = checkData(sliderPictures, 'sliderPictures', 'array', 'picUrl');

    // 图片热区
    imgHot1 = checkData(imgHot1, 'imgHot1', 'jsonStr');
    imgHot2 = checkData(imgHot2, 'imgHot2', 'jsonStr');
    imgHot3 = checkData(imgHot3, 'imgHot3', 'jsonStr');
    imgHot4 = checkData(imgHot4, 'imgHot4', 'jsonStr');
    imgHot5 = checkData(imgHot5, 'imgHot5', 'jsonStr');
    imgHot6 = checkData(imgHot6, 'imgHot6', 'jsonStr');


    buyerSayPic1 = checkData(buyerSayPic1, 'buyerSayPic1', 'string');
    buyerSayData1 = checkData(buyerSayData1, 'buyerSayData1', 'array', 'title');
    buyerSayData2 = checkData(buyerSayData2, 'buyerSayData2', 'array', 'imgUrl');


    bgColor = checkData(bgColor, 'bgColor', 'string');
    borderColor = checkData(borderColor, 'borderColor', 'string');
    discountColor = checkData(discountColor, 'discountColor', 'string');
    discountBgColor = checkData(discountBgColor, 'discountBgColor', 'string');

    tab4baoUrl = checkData(tab4baoUrl, 'tab4baoUrl', 'string');
    rowCount1 = checkData(rowCount1, 'rowCount1', 'num');
    tab4baoWidth = checkData(tab4baoWidth, 'tab4baoWidth', 'num');
    tab4GoodsTab = checkData(tab4GoodsTab, 'tab4GoodsTab', 'array', 'tabPic');
    tab4Goods1 = checkData(tab4Goods1, 'tab4Goods1', 'array', 'imgUrl');
    tab4Goods2 = checkData(tab4Goods2, 'tab4Goods2', 'array', 'imgUrl');
    tab4Goods3 = checkData(tab4Goods3, 'tab4Goods3', 'array', 'imgUrl');
    tab4Goods4 = checkData(tab4Goods4, 'tab4Goods4', 'array', 'imgUrl');

    playerList = checkData(playerList, 'playerList', 'array', 'url');

    hasPic = checkData(hasPic, 'hasPic', 'string');
    picture = checkData(picture, 'picture', 'string');
    height = checkData(height, 'height', 'num');

    // props

    const modBoxProps = {
      pageUtils: this.pageUtils,
      defaultModShow: this.state.mds.moduleData.isHome === 1 || this.state.mds.moduleData.isHome === '1',
      // defaultModShow: true,
      modName: this.state.mds.moduleData.modName,
      mds,
    };

    const props = {
      clickHot: (url, nid) => {
        this.goTargetUrl(url, nid);
      },
      mds,
    };

    const carouselProps = {
      width: 750,
      height: sliderHeight,
      tagStyle,
      pages: sliderPictures,
      ...props,
    };

    const buyerSay1Props = {
      buyerSayData: buyerSayData1,
      buyerSayPic: buyerSayPic1,
      ...props,
    };
    const buyerSay2Props = {
      buyerSayData: buyerSayData2,
      ...props,
    };


    const tabGoodsProps = {
      listTab: tab4GoodsTab,
      list1: tab4Goods1,
      list2: tab4Goods2,
      list3: tab4Goods3,
      list4: tab4Goods4,

      baoUrl: tab4baoUrl,
      baoWidth: tab4baoWidth,

      bgColor: bgColor,
      borderColor: borderColor,
      discountColor: discountColor,
      discountBgColor: discountBgColor,
      rowCount: rowCount1,
      ...props,
    };

    const playerListProps = {
      players: playerList,
      ...props,
    };

    const toHomeProps = {
      picture: picture,
      height: height,
      clickItem: () => {
        if (this.pageUtils && this.pageUtils.pageEmitter) {
          const emitter = this.pageUtils.pageEmitter;
          emitter.emit('goToIndex', '');
        }
        if (this.pageUtils && this.pageUtils.lift) {
          const { widgetId } = this.state.mds;
          this.pageUtils.lift.scrollTo(widgetId);
        }
        if (this.pageUtils) {
          this.pageUtils.goTop();
        }
      },
      mds,
    };


    return (
      <ModBox {...modBoxProps}>
        <Carousel {...carouselProps} />
        <Tab4Buyer1 {...buyerSay1Props}/>
        <ImgAddHot json={imgHot1} {...props} hotNum="1" modName={this.state.mds.moduleData.modName}/>
        <ImgAddHot json={imgHot2} {...props} hotNum="2" modName={this.state.mds.moduleData.modName}/>
        <ImgAddHot json={imgHot3} {...props} hotNum="3" modName={this.state.mds.moduleData.modName}/>
        <ImgAddHot json={imgHot4} {...props} hotNum="4" modName={this.state.mds.moduleData.modName}/>
        <TabGoods {...tabGoodsProps}/>
        <GoodsBuyerSay {...buyerSay2Props}/>
        <ImgAddHot json={imgHot5} {...props} hotNum="5" modName={this.state.mds.moduleData.modName}/>
        <PlayerList {...playerListProps}/>
        <ImgAddHot json={imgHot6} {...props} hotNum="6" modName={this.state.mds.moduleData.modName}/>
        {
          hasPic === '1' && <ToHome {...toHomeProps}/>
        }
      </ModBox>
    );
  }
}

// 模块跳转包装
class ModBox extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      modShow: true,
      height: 0,
      tabsHeight: 0,
      // test: 0,
    };
    this.defaultModShow = props.defaultModShow;
    this.modName = props.modName;
    this.clickTab = this.clickTab.bind(this);
  }

  // 添加监听器，接收消息
  componentWillMount() {

    if (this.pageUtils && this.pageUtils.pageEmitter) {
      // this.setState({
      //   test: JSON.stringify(this.pageUtils.pageEmitter),
      // });
      const emitter = this.pageUtils.pageEmitter;
      emitter.on('clickTab', this.clickTab);
    }

  }

  // 组件销毁时移除监听器
  componentWillUnmount() {
    if (this.pageUtils && this.pageUtils.pageEmitter) {
      const emitter = this.pageUtils.pageEmitter;
      emitter.off('clickTab', this.clickTab);
    }
  }

  componentDidMount() {
    this.getHeight();
    setTimeout(this.showPage, 1000);
  }

  getHeight = () => {
    const tabRefs = this.modName;
    const delay = navigator.platform === 'iOS' ? 40 : 200;

    this.setState({
      test: delay
    });
    setTimeout(() => {
      if (isWeex) {
        this.setState({
          test: '22222'
        });
        let domModule = require('@weex-module/dom');
        new Promise((resolve, reject) => {
          domModule.getComponentRect(findDOMNode(this.refs[tabRefs]), (option) => {
            resolve(option.size.height);
            this.setState({
              test: option.size.height
            });
          });
        }).then(res => {
          this.setState({
            test: `${res}`,
            tabsHeight: res,
          });
        });

        this.setState({
          test: '333333'
        });
      } else {
        let height = findDOMNode(this.refs[tabRefs]).clientHeight * 2;
        this.setState({
          tabsHeight: height,
        });
      }
    }, delay);
  };

  showPage = () => {
    if (this.modName === 'page1' || this.defaultModShow) {
      this.setState({
        height: this.state.tabsHeight,
      });
    }
  };


  clickTab(params) {
    const { modName } = this;

    if (modName.length && modName === params) {
      this.setState({
        modShow: true,
        // test: this.state.tabsHeight,
        height: this.state.tabsHeight,
      });
    } else {
      this.setState({
        modShow: false,
        height: 0,
        // test: 800,
      });
    }
  }

  render() {
    const { modShow, height, test } = this.state;
    const { mds } = this.props;

    const boxProps = {
      'data-role': mds.moduleName,
      'data-spmc': `${mds.moduleName}_${mds.widgetId}`,
      style: {
        backgroundColor: '#ffffff',
        height: height,
      },
    };

    return (
      <View {...boxProps}>
        <View ref={this.modName}>
          {
            modShow && this.props.children
          }
        </View>
      </View>
    );
  }
}

// 轮播
const carouselStyles = {
  wrapper: {
    position: 'relative',
  },
  tagBox: {
    position: 'absolute',
    left: 0,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row'
  }
};
class CarouselBox extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selected: 0
    };
  }

  onSliderChange(index) {
    const { onSliderChange = () => {} } = this.props;
    onSliderChange(index);
    this.setState({
      selected: index.index
    });
  }

  onTagClick(index) {
    this.refs.Slider.slideTo(index);
    this.setState({
      selected: index
    });
  }

  render() {
    const {
      // mds,
      // width = 750,
      // height = 750,
      width,
      height,
      autoplayTime = 3000,
      children,
      loop = true,
      tagShow = true,
      tagStyle = {},
    } = this.props;
    const {
      tagWidth = 10,
      tagSelectWidth = 20,
      tagBottom = 10,
      tagBg = '#ffffff',
      tagSelectBg = '#ffffff',
      tagMargin = 10,
    } = tagStyle;
    const isShowTag = tagShow === true || tagShow === 'true';

    const boxProps = {
      style: {
        ...carouselStyles.wrapper,
        width,
        height,
      },
      // ...stopTouchEvents,
    };
    const sliderProps = {
      width: `${width}rem`,
      height: `${height}rem`,
      ref: 'Slider',
      autoPlay: autoplayTime > 0,
      loop,
      autoplayTimeout: autoplayTime ? parseFloat(autoplayTime) : 0,
      showsPagination: false,
      onChange: this.onSliderChange.bind(this)
    };
    const tagBoxProps = {
      style: {
        ...carouselStyles.tagBox,
        height: tagWidth,
        width,
        top: height - tagWidth - tagBottom,
      }
    };

    return (
      <View {...boxProps}>
        <Slider {...sliderProps}>
          {
            children.map((item, index) => {
              return <View key={index}>{item}</View>;
            })
          }
        </Slider>
        {
          isShowTag &&
          <View {...tagBoxProps}>
            {
              children.map((item, index) => {

                const props = {
                  key: `tag_${index}`,
                  style: {
                    width: index === this.state.selected ? tagSelectWidth : tagWidth,
                    height: tagWidth,
                    borderRadius: tagWidth / 2,
                    marginRight: tagMargin,
                    backgroundColor: index === this.state.selected ? tagSelectBg : tagBg,
                  },
                  onPress: this.onTagClick.bind(this, index)
                };
                return <Touchable {...props}/>;
              })
            }
          </View>
        }

      </View>
    );
  }
}
class Carousel extends Component {
  render() {
    const {
      mds,
      pages,
      width,
      height,
      carNum = '1',
      tagShow = true,
      tagStyle,
      clickHot,
      tab = 1,
    } = this.props;

    const sliderProps = {
      width,
      height,
      tagShow,
      tagStyle,
    };

    return (
      <CarouselBox {...sliderProps}>
        {
          pages.map((item, index) => {
            const { hotUrl, picUrl } = item;

            // const spmdId = `${tab}_${index + 1}`;
            const spmdId = `${tab}_${carNum}_${index}`;
            const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
            const touchProps = {
              'data-spmd': spmd,
              style: {
                width,
                height,
              },
              onPress: () => {
                clickHot(hotUrl, spmdId);
                // clickHot(hotUrl);
              },
            };
            const picProps = {
              source: {
                uri: picUrl,
              },
              style: {
                width,
                height,
              },
              lazyload: true,
            };

            return (
              <Touchable {...touchProps}>
                <Picture {...picProps}/>
              </Touchable>
            );
          })
        }
      </CarouselBox>
    );
  }
}

// 图与热区
const ImgAddHotStyles = {
  boxStyle: {
    position: 'relative'
  },
  itemStyle: {
    position: 'absolute'
  }
};
class ImgAddHot extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { boxStyle, itemStyle, } = ImgAddHotStyles;

    const {
      json = {screenHeight: 100, screenWidth: 750, hot: [], img: []},
      clickHot = () => {}, mds, hotNum, modName,
    } = this.props;

    const scrollProps = {
      style: {
        width: 750,
        height: parseFloat(json.screenHeight),
        backgroundColor: '#ffffff',
      },
      horizontal: true,
      showsHorizontalScrollIndicator: false,
    };
    const boxProps = {
      style: {
        ...boxStyle,
        height: parseFloat(json.screenHeight),
        width: parseFloat(json.screenWidth),
        backgroundColor: '#ffffff',
      }
    };

    return (
      <ScrollView {...scrollProps}>
        <View {...boxProps}>
          {
            json.img.map((item) => {
              const props = {
                style: {
                  ...itemStyle,
                  width: parseFloat(item.data.width),
                  height: parseFloat(item.data.height),
                  top: parseFloat(item.data.y),
                  left: parseFloat(item.data.x)
                },
                lazyload: true,
                source: { uri: item.data.url }
              };
              return <Picture {...props} />;
            })
          }
          {
            json.hot.map((item, index) => {
              const spmdId = `${hotNum}_${index}_${modName}`;
              const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
              const props = {
                'data-spmd': spmd,
                style: {
                  ...itemStyle,
                  width: parseFloat(item.data.width),
                  height: parseFloat(item.data.height),
                  top: parseFloat(item.data.y),
                  left: parseFloat(item.data.x)
                },
                onPress: (e) => {
                  clickHot(item.data.url, spmdId);
                  e.stopPropagation && e.stopPropagation();
                }
              };
              return <Touchable {...props} />;
            })
          }
        </View>
      </ScrollView>

    );
  }
}

// 上下滚动轮播内部盒子
class UpSliderBox extends Component {

  constructor(props) {
    super(props);

    this.nowTop = 0;
    this.maxLength = props.children.length * 2;

    // this.childrenIndexArr = props.children.map((item, index) => index);
    this.newChildren = this.props.children.concat(this.props.children);
    this.nowIndexArr = this.newChildren.map((item, index) => index);

  }

  move(isFirst) {
    const { nowIndexArr } = this;
    const nowFirst = nowIndexArr[0];
    const { height } = this.props;

    this.newChildren.map((item, index) => {
      const box = findDOMNode(this.refs[`sliderPage${index}`]);
      const y = index >= nowFirst
        ? - height * (nowFirst + 3)
        : - height * (nowFirst + 3) + this.newChildren.length * height;

      const duration = isFirst ? 0 : 450;
      const opacity = index === nowFirst || index === nowIndexArr[nowIndexArr.length - 1] ? 0 : 1;

      this.transition(box, y, duration, opacity);
    });

    // 下一次的indexArr
    let nextIndexArr = nowIndexArr.slice(1, nowIndexArr.length);
    nextIndexArr.push(nowFirst);
    this.nowIndexArr = nextIndexArr;
  }

  transition(box, y, duration, opacity) {

    setTimeout(() => {
      transition(box, {
        transform: `translate(0, ${isWeex ? y : y / 2}px)`,
        opacity,
      }, {
        timingFunction: 'ease',
        duration,
      }, () => {
      });
    }, 0);
  }

  componentDidMount() {
    this.move(true);
  }

  componentWillUnmount() {
    this.onDisappear();
  }

  onAppear = () => {
    let { time = 5000 } = this.props;
    if (time < 1000) time = 1000;
    this.timer = setInterval(() => {
      this.move(false);
    }, time);
  };

  onDisappear = () => {
    if (this.timer) {
      clearInterval(this.timer);
    }
  };

  render() {
    const {width, height} = this.props;

    const boxProps = {
      style: {
        width,
        height: height,
        overflow: 'hidden',
      },
      onAppear: this.onAppear,
      onDisappear: this.onDisappear,
    };
    return (
      <View {...boxProps}>
        {
          this.newChildren.map((item, index) => {
            const props = {
              style: {
                width,
                height: height,
              },
              ref: `sliderPage${index}`
            };
            return <View {...props}>{item}</View>;
          })
        }
      </View>
    );
  }
}

// 上下轮播二，右侧为两个图片
const goodsSayStyle = {
  buyerSaySlider: {
    width: 750,
    height: 200,
    flexDirection: 'column',
    alignContent: 'space-between',

  },
  wrapper: {
    width: 750,
    height: 200,
    flexDirection: 'row',
    // backgroundColor: '#123456'
  },
  leftPic: {
    width: 200,
    height: 200,
  },
  context: {
    width: 380,
    height: 150,
    // lineHeight: 150,
    fontSize: 30,
    paddingTop: 10,
    paddingLeft: 16,
    paddingRight: 10,
    // backgroundColor: '#cccccc'
  },
  buyer: {
    width: 300,
    textAlign: 'left',
    overflow: 'hidden',
    height: 40,
    lineHeight: 40,
    position: 'absolute',
    left: 20,
    top: 150,
    // borderRadius: 15,
    // backgroundColor: 'pink',
    fontSize: 26,
    color: '#A49782',
  },
  right: {
    width: 100,
    height: 200,
    marginLeft: 20,
    // paddingLeft: 10,
    // paddingRight: 10,
  },
  rightPic: {
    width: 100,
    height: 100,
  }


};
class GoodsBuyerSay extends Component {

  renderItem(row, index) {

    let { clickHot = () => {}, mds} = this.props;

    const { imgUrl, h5Url, img1, img2, context = '没填数据', buyer, } = row;

    const spmdId = `${index + 1}_buyer2`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    const touchProps = {
      'data-spmd': spmd,
      style: {
        ...goodsSayStyle.wrapper,
      },
      onPress: () => {
        clickHot(h5Url, spmdId);
      }
    };
    const leftPicProps = {
      source: {
        uri: imgUrl,
      },
      style: {
        ...goodsSayStyle.leftPic,

      },
      lazyload: true,
    };
    const wordProps = {
      style: {
        width: 400,
        height: 200,
        position: 'relative',
      }
    };
    const contextProps = {
      style: {
        ...goodsSayStyle.context,
      }
    };
    const buyerProps = {
      style: {
        ...goodsSayStyle.buyer,
        // width: buyer.length - [...buyer].filter(i => /[a-zA-z]/.test(i)).length,
      }
    };
    const rightProps = {
      style: {
        ...goodsSayStyle.right,
      },
    };
    const rightPicProps = {
      style: {
        ...goodsSayStyle.rightPic,
      },
      lazyload: true,
    };

    return (
      <Touchable {...touchProps}>
        <Picture {...leftPicProps}/>
        <View {...wordProps}>
          <Text {...contextProps}>
            {context.length > 30 ? `${context.slice(0, 30)}...` : context}
          </Text>
          <Text {...buyerProps}>
            {/*{buyer.length > 8 ? `${buyer.slice(0, 8)}...` : buyer}*/}
            { buyer } (匿名)
          </Text>
        </View>
        <View {...rightProps}>
          <Picture {...rightPicProps} source={{uri: img1}}/>
          <Picture {...rightPicProps} source={{uri: img2}}/>
        </View>
      </Touchable>
    );

  }

  render() {
    let { buyerSayData, } = this.props;

    const buyerSayWidth = goodsSayStyle.buyerSaySlider.width;
    const buyerSayHeight = goodsSayStyle.buyerSaySlider.height;

    // console.log('buyerSayData===', buyerSayData);

    const sliderProps = {
      width: buyerSayWidth,
      height: buyerSayHeight,
    };

    if (buyerSayData.length === 1) {
      buyerSayData = buyerSayData.concat(buyerSayData).concat(buyerSayData);
    }
    if (buyerSayData.length === 2) {
      buyerSayData = buyerSayData.concat(buyerSayData);
    }

    // console.log('buyerSayData==22222=', buyerSayData);

    return (
      <View style={{ marginTop: 20, marginBottom: 20, backgroundColor: '#ffffff', }}>
        <UpSliderBox {...sliderProps}>
          {
            buyerSayData.map( (item, index) => {
              return this.renderItem(item, index);
            })
          }
        </UpSliderBox>
      </View>
    );
  }
}

// 上下轮播一，类似淘宝头条
const tab4Buyer1Styles = {
  buyerSayBox: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#ffffff',
  },
  buyerSayLeft: {
    height: 100,
    lineHeight: 100,
    textAlign: 'center',
    // width: 200,
    // borderRightWidth: 1,
    // borderRightColor: '#cccccc'
  },
};
class Tab4Buyer1 extends Component {

  renderItem(row, index) {

    let {
      buyerSayHeight = 100,
      buyerSayLeftWidth = 100,
      clickHot = () => {},
      mds,
    } = this.props;

    const buyerSayWidth = 730 - buyerSayLeftWidth;


    const rightPicProps = {
      source: {
        uri: row.imgUrl,
      },
      style: {
        width: 750 - buyerSayLeftWidth,
        height: buyerSayHeight,

      },
      lazyload: true,
    };

    const rowProps = {
      style: {
        width: buyerSayWidth - 170,
        height: 100,
        // lineHeight: 100,
        fontSize: 28,
        paddingRight: 8,
        paddingTop: 12,
        paddingLeft: 20,
        overflow: 'hidden',
      }
    };

    const spmdId = `${index + 1}_buyer1`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    const touchProps = {
      'data-spmd': spmd,
      style: {
        width: buyerSayWidth,
        height: buyerSayHeight,
        flexDirection: 'row',
        alignContent: 'space-between',
        // backgroundColor: '#666666',
      },
      onPress: () => {
        clickHot(row.hotUrl);
      }
    };
    return (
      <Touchable {...touchProps}>
        <Text {...rowProps}>
          { row.title.length > 30 ? `${row.title.slice(0, 30)}...` : row.title }
        </Text>
        <Picture {...rightPicProps} source={{uri: row.imgUrl}}/>
      </Touchable>
    );
  }


  render() {
    let {
      buyerSayHeight = 100,
      buyerSayLeftWidth = 100,
      buyerSayData = [],
      buyerSayPic = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2iMXao9YH8KJjSspdXXcRgVXa-3355153118.png',
    } = this.props;
    const buyerSayWidth = 750 - buyerSayLeftWidth;



    // console.log('buyerSayData111', buyerSayData);
    if (buyerSayData.length === 1) {
      buyerSayData = buyerSayData.concat(buyerSayData).concat(buyerSayData);
    }
    if (buyerSayData.length === 2) {
      buyerSayData = buyerSayData.concat(buyerSayData);

    }

    // console.log('buyerSayData', buyerSayData);
    const sliderProps = {
      width: buyerSayWidth,
      height: buyerSayHeight,
    };

    const leftPicProps = {
      source: {
        uri: buyerSayPic,
      },
      style: {
        width: buyerSayLeftWidth,
        height: buyerSayHeight,
      },
      lazyload: true,
    };
    const rightProps = {
      style: {
        // paddingLeft: 20,
        width: buyerSayWidth,
        height: buyerSayHeight,
      }
    };



    return (
      <View style={tab4Buyer1Styles.buyerSayBox}>
        <Picture {...leftPicProps}/>
        <View {...rightProps}>
          <UpSliderBox {...sliderProps}>
            {
              buyerSayData.map( (item, index) => {
                return this.renderItem(item, index);
              })
            }
          </UpSliderBox>
        </View>
      </View>
    );
  }
}

// 带tab商品列表
const tabGoodsStyles = {
  boxStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 750,
  },
  itemStyle: {
    // width: 370,
    // height: 410,
    marginTop: 10,
    backgroundColor: '#f89399',
  },
  picStyle: {
    // width: 370,
    // height: 370,
  },
  priceBox: {
    height: 40,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  price: {
    // width: 185,
    height: 40,
    lineHeight: 40,
    fontSize: 12,
    textAlign: 'center',
  },

};
class TabGoods extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clickIndex: 0,
    };
  }

  renderTab(item, index) {
    const { clickIndex, } = this.state;
    const { mds, ind = 5 } = this.props;

    const spmdId = `${item.tabPic}_${ind}_${index}`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    const touchProps = {
      'data-spmd': spmd,
      key: index,
      onPress: () => {
        this.setState({clickIndex: index});
      },
      style: {
        marginLeft: index === 0 ? 0 : 10,
        position: 'relative',
        width: 180,
        height: 70,

      },
    };

    const picProps = {
      style: {
        width: 180,
        height: 70,

      },
      source: {
        uri: index === clickIndex ? item.tabIndexPic : item.tabPic,
      },
      lazyload: true,
    };

    return (
      <Touchable {...touchProps}>
        <Picture {...picProps}/>
      </Touchable>
    );
  }

  renderGoods(item) {

    let { rightPic, clickHot = () => {}, rowCount = 3, discountColor = 'black', baoWidth, baoUrl,
      discountBgColor = 'rgba(255,255,255,0.5)', mds, tab = 1, bgColor, borderColor,
    } = this.props;

    const props = {
      list: item,
      rightPic: rightPic,
      rowCount: rowCount,
      discountColor: discountColor,
      discountBgColor: discountBgColor,
      clickHot: clickHot,
      // hasDiscount: whichPage === 'page4' || whichPage === 'page5',
      bgColor: bgColor,
      borderColor: borderColor,
      baoWidth: baoWidth,
      baoUrl: baoUrl,
      mds,
      tab,
    };


    return <Tab2GoodsList {...props}/>;

  }

  renderItems() {
    const { list1 = [], list2 = [], list3 = [], list4 = [], list5 = [], list6 = [], list7 = [], list8 = [], list9 = [], list10 = [], } = this.props;
    const { clickIndex } = this.state;
    switch (clickIndex) {
      case 0: return this.renderGoods(list1); break;
      case 1: return this.renderGoods(list2); break;
      case 2: return this.renderGoods(list3); break;
      case 3: return this.renderGoods(list4); break;
      case 4: return list5.length && this.renderGoods(list5); break;
      case 5: return list6.length && this.renderGoods(list6); break;
      case 6: return list7.length && this.renderGoods(list7); break;
      case 7: return list8.length && this.renderGoods(list8); break;
      case 8: return list9.length && this.renderGoods(list9); break;
      case 9: return list10.length && this.renderGoods(list10); break;
    }
  }

  render() {
    const { listTab, } = this.props;

    const scrollProps = {
      style: {
        width: 750,
        height: 170,
        paddingTop: 25,

      },
      horizontal: true,
      showsHorizontalScrollIndicator: false,
    };
    const tabProps = {
      style: {
        width: 750,
        height: 72,
        // backgroundColor: '#f89399',
        flexDirection: 'row',
      },
    };


    return (
      <View >
        <View {...tabProps}>{listTab.map((item, index) => this.renderTab(item, index))}</View>
        <View style={{
          ...tabGoodsStyles.boxStyle,
        }}>
          {
            this.renderItems()
          }
        </View>
      </View>
    );
  }
}

// tab2的单个商品列表
const Tab2goodsStyles = {
  boxStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 750,
    // paddingLeft: 10,
    // paddingRight: 10,
    // paddingBottom: 10,
    // backgroundColor: '#123456',
  },
  itemStyle: {
    // width: 358,
    // height: 546,
    marginTop: 10,
    backgroundColor: '#ffffff',
  },
  picStyle: {
    // width: 358,
    // height: 358,
  },
  priceBox: {
    // height: 188,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // title: {
  //   height: 100,
  //   lineHeight: 50,
  //   fontSize: 24,
  // },
  normalPrice: {
    height: 30,
    lineHeight: 30,

    textDecoration: 'line-through',
  },
  nowPriceBox: {
    position: 'relative',
    // height: 60,
    // marginTop: 10,
    // backgroundColor: '#123456',
  },
  icon: {
    position: 'absolute',
    left: 0,
    // color: '#ee2b15',
    // top: 22,

    // lineHeight: 30,
  },
  price: {
    // color: '#ee2b15',
    position: 'absolute',
    // left: 16,
    // lineHeight: 50,
    // fontSize: 50,
    // fontWeight: 'bold',
  },
  rightPic: {
    // width: 120,
    // lineHeight: 30,
    // height: 30,
    color: '#969696',
    position: 'absolute',
    top: 0,
  },
  bull: {
    width: 8,
    height: 8,
    borderRadius: 100,
    backgroundColor: 'red',
    marginTop: 12,
    marginRight: 10,
    marginLeft: 10,
  },
};
class Tab2GoodsList extends Component {

  renderItem(item, index) {
    const { mds, clickHot = () => {}, rowCount = 2, isPic = false, borderColor, baoWidth = 60,
      discountColor = 'black', baoUrl,
      discountBgColor = 'rgba(255,255,255,0.5)',
    } = this.props;
    const { imgUrl, h5Url, header, text, discount } = item;

    const spmdId = `${index}_${imgUrl}_goods2`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;

    let goodWidth = 222;
    // let priceBoxWidth = rowCount === 3 ? goodWidth * 1 / 2 + 18 : goodWidth * 1 / 2 - 16;
    let priceBoxWidth = 140;

    const touchProps = {
      'data-spmd': spmd,
      style: {
        ...Tab2goodsStyles.itemStyle,
        marginLeft: 20,
        width: goodWidth,
        height: goodWidth + priceBoxWidth,
        // border: '3px solid red',
        borderColor: borderColor,
        borderWidth: 1,
      },
      onPress: () => {
        clickHot(h5Url, spmdId);
      }
    };

    const priceBoxProps = {
      style: {
        ...Tab2goodsStyles.priceBox,
        // height: priceBoxWidth + 50,
      }
    };
    const picProps = {
      source: {
        uri: imgUrl
      },
      style: {
        ...Tab2goodsStyles.picStyle,
        width: goodWidth,
        height: goodWidth,
      },
      lazyload: true,
    };
    const picBaoProps = {
      source: {
        uri: baoUrl
      },
      style: {
        marginTop: 10,
        width: baoWidth,
        height: 25,
      },
      lazyload: true,
    };
    const headerProps = {
      style: {
        // width: 750,
        height: rowCount === 3 ? 28 : 44,
        lineHeight: rowCount === 3 ? 28 : 44,
        // textAlign: 'center',
        fontSize: rowCount === 3 ? 24 : 36,
        // fontWeight: 'bold',
        color: '#000000',
        overflow: 'hidden',
        marginTop: 12,
        // backgroundColor: '#123456',
      }
    };
    const titleProps = {
      style: {
        // width: 750,
        height: rowCount === 3 ? 28 : 32,
        lineHeight: rowCount === 3 ? 28 : 32,
        // textAlign: 'center',
        fontSize: rowCount === 3 ? 24 : 30,
        color: '#adadad',
        overflow: 'hidden',
        marginTop: 10,
        // backgroundColor: '#654321',
      }
    };

    const discountProps = {
      style: {
        width: discount.length !== 0 && (discount.length - [...discount].filter(i => !isNaN(+i)).length / 2 ) * 30 + 36,
        height: 36,
        backgroundColor: discountBgColor,
        alignContent: 'space-between',
        flexDirection: 'row',
        position: 'absolute',
        left: 10,
        top: rowCount === 2 ? 300 : 180,
      }
    };
    const discountTextProps = {
      style: {
        fontSize: 28,
        color: discountColor,
        // marginTop: 2,
      }
    };


    return (
      <Touchable {...touchProps}>
        <Picture {...picProps}/>
        {
          discount.length !== 0 && <View {...discountProps}>
            <View style={Tab2goodsStyles.bull}/>
            <Text {...discountTextProps}>{discount}</Text>
          </View>
        }
        <View {...priceBoxProps}>

          <Picture {...picBaoProps}/>
          <Text {...headerProps}>{
            header.length > 8 ? `${header.slice(0, 8)}...` : header
          } </Text>
          <Text {...titleProps}>{
            text
          } </Text>
        </View>
      </Touchable>
    );
  }

  render() {
    let { list, bgColor } = this.props;

    return (
      <View style={{
        ...Tab2goodsStyles.boxStyle,
        backgroundColor: bgColor,
      }}>
        {
          list.map((item, index) => this.renderItem(item, index))
        }
      </View>
    );
  }
}

// 视频列表组件,遍历video组件就会在ios下显示不出控制条
const playerListStyles = {
  boxStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 750,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: '#ffffff',
  },
  itemStyle: {
    // width: 358,
    // height: 546,
    marginTop: 10,
    backgroundColor: '#ffffff',
  },
  title: {
    textAlign: 'center',
    paddingTop: 10,
    height: 60,
    lineHeight: 50,
    fontSize: 30,
    overflow: 'hidden',
  },

};
class PlayerList extends Component {

  renderItem(item, index) {
    const { rowCount = 2, tab = 1, mds, clickHot = () => {}, } = this.props;
    const { url, pos, title, titleUrl, } = item;


    let goodWidth = (730 - (rowCount - 1) * 10) / rowCount;

    const wrapperProps = {
      // 'data-spmd': spmd,
      key: index,
      style: {
        ...playerListStyles.itemStyle,
        marginLeft: index % rowCount === 0 ? 0 : 8,
        width: goodWidth,
        height: goodWidth * 2 / 3 + 80,
      },
    };
    const videoProps = {
      width: goodWidth,
      height: goodWidth * 2 / 3,
      poster: pos,
      url: url,
      // muted: true,
    };
    const playerProps = {
      style: {
        width: goodWidth,
        height: goodWidth * 2 / 3,
      },
      poster: pos,
      src: url,
      // muted: true,
    };
    const spmdId = `${tab}_${index}_playerList`;
    const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
    const touchProps = {
      'data-spmd': spmd,
      onPress: () => {
        clickHot(titleUrl, spmdId);
      },
      style: {
        height: 100,
        // lineHeight: 50,
      },
    };

    return (
      <View {...wrapperProps}>
        <OneVideo {...videoProps} key = {index}/>
        {/*<Player {...playerProps} controls hasFullScreen startBtn/>*/}
        <Touchable {...touchProps}>
          <Text style={playerListStyles.title}>{
            title.length > 15 ? `${title.slice(0, 15)}...` : title
          }</Text>
        </Touchable>

      </View>
    );
  }

  render() {
    const { players } = this.props;

    return (
      <View style={{
        ...playerListStyles.boxStyle,
      }}>
        {
          players.map((item, index) => this.renderItem(item, index))
        }
      </View>
    );
  }
}

// 单个视频video组件
const oneVideoStyle = {
  box: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
};
class OneVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
    };
  }


  render() {
    let { url, poster, width = 750, height = 400, } = this.props;
    const { isPlaying } = this.state;

    const videoProps = {
      style: {
        width: width,
        height: height,
      },
      src: url,
      controls: true,
      autoPlay: true,
      autoplay: true,
      ref: 'video',

      // onVideoPlay: () => {
      //   // this.setState({isPlaying: true});
      //   this.isPlay(true, index);
      // },
      // onVideoPause: () => {
      //   // this.setState({isPlaying: false});
      //   this.isPlay(false, index);
      // },
      // onAppear: () => {
      //   this.refs.player.refs.video.play();
      // },
      // onDisappear: () => {
      //   this.refs.player.refs.video.pause();
      // },
      // ref: 'player',
    };

    const touchProps = {

      style: {
        ...oneVideoStyle.box,
        width: width,
        height: height,
      },
      onPress: () => {
        // this.refs.video.play();
        this.setState({
          isPlaying: true,
        });
      }
    };
    const posterProps = {
      style: {
        width: width,
        height: height,
        ...oneVideoStyle.box,
      },
      source: {
        uri: poster,
      },
      lazyload: true,
    };
    return (
      <View style={{ width: width, height: height}} >
        {
          isPlaying ? <video {...videoProps}/> :
            <Touchable {...touchProps}>
              <Picture {...posterProps}/>
            </Touchable>
        }
      </View>
    );
  }
}

//  返回首页
class ToHome extends Component {

  render() {
    const {
      picture, height, clickItem = () => {},
    } = this.props;


    const boxProps = {
      style: {
        width: 750,
        height: height,
      },
      onPress: () => {
        clickItem();
      }

    };

    const picProps = {
      source: {
        uri: picture.length !== 0 && picture,
      },
      style: {
        width: 750,
        height: height,

      },
      lazyload: true,
    };

    return (
      <Touchable {...boxProps}>
        <Picture {...picProps}/>
      </Touchable>
    );
  }
}

export default MainApp;

